HOST TO HOST
2017 Softtek - Grupo Interacciones "Host to Host" - Ux/Ui
Grupo Interacciones fué un grupo financiero que se dedicó a ofrecer créditos gubernamentales y financiamiento para proyectos de infraestructura y operaciones de banca de inversión. Para este proyecto se construyó un sistema de transferencias interbancarias denominado "Host to Host", para lo cuál se utilizó el framework "ExtJs" versión 6.5 . Este framework es una librería de componentes para construir aplicaciones web empresariales.
El usuario de Grupo Financiero Interacciones (GFI) solicitó el desarrollo de un sistema capaz de realizar transferencias interbancarias de Host a Host, de ahí el nombre del proyecto. Para construir un sistema con estas características, se utilizó el framework "ExtJs", el cual funciona mediante módulos y se programa íntegramente con Javascript. El módulo para construir una interfaz de escritorio se llama "Classic", mientras que el módulo para construir una interfaz para dispositivos móviles se llama "Mobile app". En cuanto a los estilos para el aspecto visual, "ExtJs" trabaja con SCSS.
El trabajo realizado en este proyecto se comenzó desde cero ya que fue necesario realizar investigaciones, para idear una propuesta de interfaz, prototipar e implementar las propuestas de diseño. Inicialmente el usuario GFI no tenia muy claro como construir el sistema, por lo cuál hubo que involucrarse en la parte del negocio para conocer un poco más sobre el usuario sus expectativas y sus necesidades. Se llevaron acabo reuniones y entrevistas con stakeholders del equipo de GFI. Con la información obtenida del usuario, se generaron las propuestas de diseño (mockups, wireframes y wireflows) de los flujos de las pantallas de "Host to Host" se presentaron al usuario GFI para su validación e iteración, dependiendo del feedback del usuario.
La propuesta de diseño generada, contempló para la versión "Classic" pantallas responsivas ya que la problematica abordada, fue que la institución contaba con diferentes tamaños de pantallas al momento de consultar el sistema. Por lo tanto era necesario generar pantallas que se adaptaran al tamaño de cada monitor. Además se propuso un menú lateral colapsable que, al colapsar y descolapsar, mueve el resto de elementos de la pantalla. Para lograr esto, se implementó un diseño responsivo líquido, lo que ayudo a que la pantalla se adaptara al tamaño de cualquier monitor y el menú colapsara y descolapsara sin que los demás elementos de la pantalla se desbodaran.
El sistema consiste principalmente en formularios. El diseño la interfaz se creó con el propósito de facilitar un mapeo natural para el usuario. Se busca que la función o el propósito de los elementos de la interfaz sean evidentes y comprensibles. Esto implica que los controles y los elementos visuales en la interfaz deben estar dispuestos de manera que reflejen la relación entre ellos y las acciones que desencadenan.
Para el uso de paleta de color, iconografía, tipografía y logotipos utilizados en el proyecto, se solicito al usuario de GFI si contaban con algún manual de marca. El usuario proporciono un manual de branding para impresos de Grupo Interacciones, que incluía aplicaciones y restricciones para el uso de logotipos, isotipos, paleta de colores, tipografías, imágenes, iconografías, espaciados, introducción y visión de la marca. Gracias al uso de este manual fue más fácil definir la apariencia de las pantallas. sin caer en hacer uso indebido de los materiales del "Look and feel" del sistema.
Las propuestas de diseño generadas se validaron con el usuario GFI para su aprobación, El usuario dio sus puntos de vista y su retroalimentación sobre cada pantalla presentada, en este punto el proceso de diseño tuvo varias iteraciones antes de llegar el resultado final. Una vez listas se implementaron en el framework "ExtJs" trabajando específicamente en el módulo "Classic". Los estilos finales para lograr la apariencia deseada se generaron e implementaron con SCCS.
Una vez completada la implementación de las propuestas de diseño en el marco de trabajo, el siguiente paso fue probar y validar los flujos y las pantallas con el equipo de desarrollo y el usuario GFI, para asegurarse que todo estuviera como se había propuesto. Esto implicaba realizar un seguimienton (End to End) incluyendo también colores, tipografías, elementos como campos de texto, casillas de verificación, radiobuttons, botones, tablas, paginadores, mensajes de error y alertas.
En todo momento, nos esforzamos por asegurar que los diseños cumplieran con los criterios de usabilidad, como la facilidad de uso y aprendizaje, consistencia, flexibilidad, robustez y adecuación. También nos aseguramos de que los usuarios sintieran que tenían un control total sobre el sistema y que la carga cognitiva se minimizara, priorizando el reconocimiento sobre el recuerdo.
A pesar de que el proyecto "Host to Host" es un sistema robusto y complejo debido al tipo de información que procesa, recibimos comentarios positivos por parte de los stakeholders y usuarios. Esto se debe a que no se necesita una capacitación exhaustiva, para operar el sistema. El proceso de completar una tarea es intuitivo y fácil de aprender, ya que el sistema guía al usuario de una pantalla a otra de manera fluida.
Por último, debo mencionar que 'Host to Host' representó un gran desafío en términos de UX/UI, ya que 'ExtJs' no es tan flexible. La curva de aprendizaje (Javascript y SCSS) para implementar las propuestas de diseño en el framework fue bastante pronunciada y el tiempo disponible para ello fue limitado, lo que agregó un alto grado de complejidad al proyecto.
